<template>
  <div class="index-main-container">
    <div class="index-header-container">
      <el-link :underline="false" type="info" style="font-size:18px;line-height:50px;font-weight:500;">会说话的曼唐-后台管理</el-link>
      <el-button type="warning" icon="el-icon-switch-button" circle style="vertical-align:top;float:right;" @click="logout"></el-button>
      <el-link :underline="false" type="info" style="font-size:16px;line-height:50px;float:right;margin-right:20px;">{{userMsg.nickname}}</el-link>
    </div>
    <div class="index-content-container">
      <el-scrollbar>
        <div class="index-aside">
          <el-menu :default-active="nowRoute" @select="handleSelect" class="el-menu-vertical-demo" background-color="rgb(48, 65, 86)"
            text-color="rgb(191, 203, 217)" style="border:none">
            <div v-for="item in routes" :key="item.name">
              <el-menu-item v-if="item.path!='/' && !item.children" :index="item.name">
                <template slot="title">
                  <i :class="item.meta.icon" aria-hidden="true"></i>
                  <span style="padding:0 0 0 10px;">{{item.meta.label}}</span>
                </template>
              </el-menu-item>
              <el-submenu v-if="item.children" :index="item.name">
                <template slot="title">
                  <i :class="item.meta.icon" aria-hidden="true"></i>
                  <span style="padding:0 0 0 10px;">{{item.meta.label}}</span>
                </template>
                <div v-for="citem in item.children" :key="citem.name">
                  <el-menu-item v-if="citem.path != '/' && !citem.children" :index="citem.name">{{citem.meta.label}}</el-menu-item>
                </div>
              </el-submenu>
            </div>
          </el-menu>
        </div>
      </el-scrollbar>
      <div class="index-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {

    }
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg'
    }),
    handleSelect(key, keyPath) {
      if (keyPath[keyPath.length - 1] != this.nowRoute) {
        this.$router.push({
          name: keyPath[keyPath.length - 1]
        })
      }
    },
    //退出登录
    logout() {
      this.setUserMsg({}, true);
      this.$router.push({
        path: '/admin/login'
      })
    },
  },
  created() {
    if (!this.userMsg.objid) {
      this.$router.push({
        path: '/admin/login'
      })
    }
  },
  computed: {
    routes: function () {
      return this.$router.options.routes[2].children
    },
    nowRoute: function () {
      return this.$route.name
    },
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    })
  },
  mounted() {
    // window.console.log(this.routes)
  }
}
</script>

<style lang="less" scoped>
.index-main-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.index-header-container {
  height: 50px;
  padding: 0 10px;
  overflow: hidden;
}
.index-content-container {
  height: calc(100% - 50px);
  position: relative;
  overflow: hidden;
}
.index-aside {
  overflow: hidden;
}
.index-content {
  position: absolute;
  right: 0px;
  border-top: 1px solid #eee;
  height: calc(100% - 31px);
  width: calc(100% - 240px);
  padding: 15px 15px;
}
/deep/ .el-scrollbar {
  background: rgb(48, 65, 86);
  position: absolute;
  left: 0px;
  width: 210px;
  height: 100%;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/ .el-menu-item:hover,
/deep/ .el-submenu__title:hover {
  background: rgb(38, 52, 69) !important;
}
/deep/ .el-submenu .el-menu-item:hover {
  background: rgb(31, 45, 61) !important;
}
</style>